{% extends '__base__.html' %}
{% load staticfiles %}

{% block content %}

    <div class="app-title">
        {#            页面简介区域#}
        <div>
            <h1><i class="fa fa-th-list"></i> ECS 管理</h1>
            {% if ecs_manage %}
                <p> 同步阿里云 ECS 基本信息、监控信息</p>
            {% else %}
                <p>No ECS are available.</p>
            {% endif %}
        </div>
        {#            面包屑区域#}
        <ul class="app-breadcrumb breadcrumb side">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">系统管理</li>
            <li class="breadcrumb-item active"><a href="#">ECS 管理</a></li>
        </ul>
    </div>
    {#        操作结果提示栏区域#}
    <div class="row">
        <div class="col-lg-12">
            <div class="bs-component">
                <div class="alert alert-dismissible" id="notice" style="display: none;">
                    <button class="close" type="button" data-dismiss="alert">×</button>
                    <h4></h4>
                    <p><a class="alert-link" href="#"></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    {#        按钮区域#}
    <div>
        <button class="btn btn-success" type="button" onclick="sync_all_ecs()">同步所有ECS</button>
        <button class="btn btn-info" type="button" onclick="update_all_ecs_info()">刷新所有ECS基础信息</button>
        <button class="btn btn-warning" type="button" onclick="update_all_ecs_resource()">刷新所有ECS监控数据</button>
    </div>

    {#        表格区域#}
    {% if ecs_manage %}
        <div class="row" id="loading">
            <div class="col-md-12">
                <div class="tile">
                    {#                    表格数据区域#}
                    <div class="tile-body table-responsive" id="table">
                        <table class="table table-hover table-bordered" id="sampleTable"
                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                            <thead>
                            <tr>
                                <th>区域</th>
                                <th>网络类型</th>
                                <th>ECS名称</th>
                                <th>实例ID</th>
                                <th>系统类型</th>
                                <th>系统版本</th>
                                <th>内网IP地址</th>
                                <th>外网IP地址</th>
                                <th>配置规格</th>
                                <th>使用状态</th>
                                <th>运行状态</th>
                                <th>过期时间</th>
                                <th>修改日期</th>
                                <th>CPU使用率</th>
                                <th>内存使用率</th>
                                <th>磁盘使用率</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for ecs in ecs_manage %}
                                <tr>
                                    <td>{{ ecs.regionId }}</td>
                                    <td>{{ ecs.network_type }}</td>
                                    <td>{{ ecs.name }}</td>
                                    <td>{{ ecs.instance_id }}</td>
                                    <td>{{ ecs.os_type }}</td>
                                    <td>{{ ecs.osname }}</td>
                                    <td>{{ ecs.IP }}</td>
                                    <td>{{ ecs.public_ip_address }}</td>
                                    <td>CPU:{{ ecs.cpu }}核 内存:{{ ecs.memory }}G</td>
                                    <td>
                                        {% if ecs.status == 'Y' %}<span>启用</span>
                                        {% else %}<span class="text-danger"><strong>禁用</strong></span>
                                        {% endif %}
                                    </td>
                                    <td>{{ ecs.instance_status }}</td>
                                    <td>{{ ecs.expired_time|date:"Y-m-d H:i:s" }}</td>
                                    <td>{{ ecs.modified_time|date:"Y-m-d H:i:s" }}</td>
                                    <td>{{ ecs.recently_cpu }}</td>
                                    <td>{{ ecs.recently_memory }}</td>
                                    <td>{{ ecs.recently_disk_usage }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">请先同步阿里云 ECS</div>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}

{% block custom_static %}

    <!-- Data table plugin-->
    <script type="text/javascript" src="{% static 'js/plugins/jquery.dataTables.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/dataTables.bootstrap.min.js' %}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>

    <!-- Notice-->
    <script type="text/javascript" src="{% static 'js/plugins/bootstrap-notify.min.js' %}"></script>

    <!-- function-->
    <script>

        // 同步所有ECS
        function sync_all_ecs() {
            let postUrl = "{% url 'system:sync_all_ecs_from_acs' %}";
            // 显示 loading 遮盖层
            jQuery('#loading').showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "同步成功 : ",
                        message: "从阿里云同步所有 ECS 成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "success"
                    });
                }
                else {
                    // 提示失败信息
                    $.notify({
                        title: "同步失败 : ",
                        message: "从阿里云同步所有 ECS 失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery('#loading').hideLoading();
                }, 300);
            });
        }

        // 更新所有ECS基础信息
        function update_all_ecs_info() {
            let postUrl = "{% url 'system:update_all_ecs_info' %}";
            // 显示 loading 遮盖层
            jQuery('#loading').showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "更新成功 : ",
                        message: "从阿里云更新所有 ECS 基础信息成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "info"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "更新失败 : ",
                        message: "从阿里云更新所有 ECS 基础信息失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    $(".overlay").css("display", "none");
                }, 300);
            });
        }

        // 刷新所有 ECS 资源使用率信息
        function update_all_ecs_resource() {
            let postUrl = "{% url 'system:update_all_ecs_monitor' %}";
            // 显示 loading 遮盖层
            jQuery('#loading').showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "更新成功 : ",
                        message: "从阿里云更新所有 ECS 监控信息成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "warning"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "更新失败 : ",
                        message: "从阿里云更新所有 ECS 监控信息失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery('#loading').hideLoading();
                }, 300);
            });
        }

    </script>

{% endblock %}